<script setup>
defineProps({
  // 商品id
  id: {
    type: Number,
    default: 0
  },
  // 图片参数
  cover: {
    type: String,
    default: ''
  },
  // 商品名称
  name: {
    type: String,
    default: ''
  },
  // 商品价格
  price: {
    type: Number,
    default: 0
  },
  // 跳转方法
  goToDetail: {
    type: Function,
    default: () => {}
  }
})
const emit = defineEmits(['goToDetail'])
const goToDetail = (id) => {
  // 触发传入组件的goToDetail事件 并将id通过emit的第二个参数传给父组件
  // ctx.emit('goToDetail', id)
  emit('goToDetail', id); // 正确的事件发射
}
const formatPrice = (price) => {
  return price > 0 ? `¥${price.toFixed(2)}` : '价格待定';
};
</script>

<template>
<!--  商品单项 添加单机事件-->
  <div class="good-item" @click="goToDetail(id)">
<!--    商品图片，赋值cover-->
  <img :src="cover" alt="">
<!--    商品描述-->
    <div class="good-desc">
<!--      商品名称-->
      <div class="title"> {{ name }}</div>
<!--      商品价格-->
      <div class="price"> {{ formatPrice(price) }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "@/theme/custom";
.good-item{
  box-sizing: border-box;
  width: 50%;
  border-bottom: 1px solid #e9e9e9;
  padding: 10px 10px;
  img{
    display: block;
    width: 120px;
    margin: 0 auto;
  }
  .good-desc{
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    .title{
      color: #FFF;
    }
    .price{
      color: @primary;
    }
  }
  &:nth-child(2n+1){
    border-right: 1px solid #e9e9e9;
  }

}

</style>